<template>
  <div class="nologin" :style="{ height: pageHeight + 'px' }" ref="nologin">
    <div class="wrap">
      <div class="icon">
        <van-icon :name="icon" />
      </div>
      <div class="title">
        <slot name="title"></slot>
      </div>
      <p class="adv">{{ $t("slogan") }}</p>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
import 'vant/lib/icon/style/less';

export default {
    name: 'nologin',
    props: {
        icon: {
            type: String,
            default: 'warning'
        }
    },
    components: {
        [Icon.name]: Icon
    },
    data () {
        return {
            pageHeight: 0
        };
    },
    created () {
        this.pageHeight = this.$util.ScreenCanUseHeight(
            this.$store.state.tabbarHeight
        );
    }
};
</script>

<style scoped lang="less">
.nologin {
  width: 100%;
  font-size: 18px;
  .icon {
    margin: 30px 0;
    text-align: center;
    color: #ee0a24;
    font-size: 2rem;
  }
  .wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 12rem;
    .btn {
      border: none;
      outline: none;
      font-weight: bolder;
      width: 100%;
      background-color: #ffe60f;
      padding: 10px 0;
      font-size: 16px;
      border-radius: 6px;
      margin: 55px 0;
    }
    .title {
      font-size: 16px;
      padding: 0 10px;
      box-sizing: border-box;
      text-align: center;
      font-weight: bolder;
    }
    .adv {
      font-size: 0.48rem;
      color: #b9b9b8;
      padding: 15px 0;
      text-align: center;
    }
  }
}
</style>
